import React, {useRef, useEffect} from 'react';
import * as echarts from 'echarts';
import {get} from "../../../service";
import 'echarts-wordcloud'

function WordCloudChart(props) {
    const ref = useRef()
    useEffect(() => {
        const echart = echarts.init(ref.current)
        const options = {
            tooltip: {
                show: true
            },
            series: [
                {
                    type: 'wordCloud',//词云图
                    sizeRange: [12, 40],//字体大小范围
                    gridSize: 20,//网格大小
                    textStyle: {
                        fontWeight: 'bold',
                        fontFamily: 'sans-serif',
                        color: function () {
                            return `rgb(${
                                [
                                    Math.round(Math.random() * 160),
                                    Math.round(Math.random() * 160),
                                    Math.round(Math.random() * 160)
                                ].join(',')
                            })`
                        }
                    },
                    data:[]
                }
            ]
        }
        echart.setOption(options)
        window.addEventListener('resize', () => {
            echart.resize()
        })
        get('/api/overview/hotwords').then(res => {
            echart.setOption({
                series:[{data:res.records}]
            })
        })
    }, [])
    return (
        <div ref={ref} style={{height: '100%'}}></div>
    );
}

export default WordCloudChart;